<template>
  <div class="container" :style="color">
    <el-container>
      <el-header style="padding:0;">
        <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="1">处理中心</el-menu-item>
        <el-submenu index="2">
          <template slot="title">{{adminName}}：{{roleName}}</template>
        </el-submenu>
        <el-menu-item index="4" @click="goIndex">主页</el-menu-item>
        <el-menu-item index="5" @click="exit">退出</el-menu-item>
      </el-menu>
      </el-header>
      <!-- 内容 -->
      <el-container class="con-left">
        <!-- 左边导航 -->
        <el-aside :width="width" style="transition:.5s;background-color:#545c64;">
          <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;width:80px;">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
          </el-radio-group>
          <el-menu default-active="1-4-1" class="el-menu-vertical-demo"
          @open="handleOpen" 
          @close="handleClose" 
          :collapse="isCollapse" 
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
            <el-submenu :index="m.url" v-for="m in menu" :key="m.id">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">{{m.title}}</span>
              </template>
              <el-menu-item-group v-for="(mm,i) in m.subs" :key="mm.id">
                <span slot="title">分组{{i+1}}</span>
                <el-menu-item :index="mm.id" @click="checkcom(mm.url)">{{mm.title}}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <component :is="comName"></component>
          </el-main>
          <el-footer style="background-color:#bdc3c7;line-height:50px;color:grey;font-size:1em;">相信奇迹的人本身和奇迹一样了不起！！！</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Zhuye from './Zhuye.vue'
import FindAll from './product/FindAll.vue'
import SetVideos from './product/SetVideos.vue'
import UpdateVideos from './product/UpdateVideos.vue'
import FindAllAdmin from './users/FindAllAdmin.vue'
import FindAllUser from './users/FindAllUser.vue'
import Role from './users/Role.vue'
export default {
  components:{
    Zhuye,
    FindAll,
    SetVideos,
    UpdateVideos,
    FindAllAdmin,
    FindAllUser,
    Role,
  }
  ,
    data() {
      return {
        // 头部导航
        activeIndex: '1',
        activeIndex2: '1',
        // 左边导航
        isCollapse: true,
        width:"80px",
        color:{
          backgroundColor:"#fff" //#545c64
        },
        // 初始化admin页面
        roleId:this.$route.params.role_id,
        menu:[],
        // 组件注册
        comName:"Zhuye",
        adminName:'',
        roleName:''
      };
    },
    methods: {
      // 头部导航
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      goIndex(){
        
      },
      // 左边导航
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      checkcom(url){
        console.log(url);
        this.comName = url;
      },
      // 
      initmenu(){
        this.$ajax({
          url:"admin/getmenus/"+this.roleId,
          method:"get"
        }).then(resp=>{
        this.menu = resp.data.message;
        })
      },
      // 组件切换
      goIndex(){
        this.comName = "Zhuye";
      },
      exit(){
        this.$confirm('此操作将退出登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '退出登录成功!'
          });
          localStorage.setItem("adminInfo","");
          this.$router.push("/login");
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出登录'
          });          
        });
      }
    },
    created(){
      this.initmenu();
      this.adminName = JSON.parse(localStorage.getItem('adminInfo'))[0].nickname
      this.roleName = JSON.parse(localStorage.getItem('adminInfo'))[0].role_name
    },
    watch:{
      "isCollapse":function(val){
        if(!val){
          this.width = "230px";
        }else{
          this.width = "80px";
        }
      }
    }
}

</script>

<style scoped>
.container{
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: auto;
}
.con-left{
  height: 660px;
  overflow-y: scroll;
}
/* 左边导航 */
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>